<template>
  <div class="con">
    <MusicSearch @isSuggest="isSuggest" />

    <div v-show="show">
      <van-cell-group>
        <van-cell v-for="item in list" title-class="ellipsis" @touchend="goPlay(item)" :key="item.id" :title="item.name" :label="item.ar[0].name"> {{ dateFormat(item.dt) }} </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import MusicSearch from './MusicSearch.vue'
import { musicApi } from '../../config'
import { get } from '../../request/index'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)

export default {
  components: {
    MusicSearch,
  },
  data() {
    return {
      show: true,
      keyword: '',
      list: [],
    }
  },

  watch: {
    $route(newRoute) {
      this.keyword = newRoute.query.keyword
    },

    keyword(newK) {
      this.getList(newK)
    },
  },
  created() {
    this.keyword = this.$route.query.keyword
  },

  methods: {
    isSuggest(b) {
      this.show = !b
    },

    getList(key) {
      get(musicApi + '/cloudsearch?keywords=' + key).then(res => (this.list = res.result.songs))
    },

    dateFormat(ms) {
      return dayjs.duration(ms).format('mm:ss')
    },

    goPlay({ id }) {
      this.$router.push({
        name: 'MmusicPlay',
        params: { id },
      })
    },
  },
}
</script>

<style lang="less">
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
